<template>
  <div class="notice">
    <div class="search">
      <div>
        <el-input
          v-model="search.title"
          v-haspermi="['bxy:messages:search']"
          :placeholder="$t('notice.searchByTitle')"
          :maxlength="50"
          class="search-title"
          clearable
          @blur="trim('title')"
          @mouseout.native="blurRule($event)"
        />
        <el-input
          v-model="search.content"
          v-haspermi="['bxy:messages:search']"
          :placeholder="$t('notice.searchByContent')"
          :maxlength="50"
          class="search-content"
          clearable
          @blur="trim('content')"
          @mouseout.native="blurRule($event)"
        />
        <el-date-picker
          v-model="dateTime"
          v-haspermi="['bxy:messages:search']"
          type="datetimerange"
          :range-separator="$t('common.to')"
          :start-placeholder="$t('common.startTime')"
          :end-placeholder="$t('common.endTime')"
          :default-time="['00:00:00', '23:59:59']"
          class="search-date"
          @change="changeDate"
        />
        <el-button
          v-haspermi="['bxy:messages:search']"
          class="search-button"
          type="primary"
          icon="el-icon-search"
          @click.native="searchContent"
        >{{ $t('notice.search') }}</el-button>
        <el-button
          v-haspermi="['bxy:messages:ordinary']"
          class="search-button notice-button"
          type="success"
          @click="addNoticeDialog('0')"
        >{{ $t('notice.commonNotice') }}</el-button>
        <el-button
          v-haspermi="['bxy:messages:template']"
          class="search-button notice-button"
          type="success"
          @click="addNoticeDialog('1')"
        >{{ $t('notice.templateNotice') }}</el-button>
      </div>
    </div>
    <div class="notice-content">
      <el-table
        size="small"
        border
        :data="notices"
        tooltip-effect="dark"
        :row-key="getRowKeys"
      >
        <el-table-column
          :label="$t('common.num')"
          width="55"
          align="center"
          type="index"
        />
        <el-table-column
          :label="$t('notice.noticeTitle')"
          width="150"
          align="center"
        >
          <template slot-scope="scope">
            <div class="title">{{ scope.row.title }}</div>
          </template>
        </el-table-column>
        <el-table-column :label="$t('notice.noticeContent')" align="center">
          <template slot-scope="scope">
            <div class="content-inner">{{ scope.row.content }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="createUserName"
          :label="$t('notice.publisher')"
          width="120"
          align="center"
        />
        <el-table-column
          prop="createTime"
          :label="$t('notice.createTime')"
          width="200"
          align="center"
        />
        <el-table-column
          :label="$t('common.operate')"
          align="center"
          width="200"
        >
          <template slot-scope="scope">
            <el-button v-haspermi="['bxy:messages:details']" size="mini" @click="getNoticeDetail(scope.row)">{{
              $t('notice.goDetail')
            }}</el-button>
            <el-button
              v-haspermi="['bxy:messages:delete']"
              size="mini"
              type="danger"
              @click="cancelNotice(scope.row.id)"
            >{{ $t('common.delete') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 消息详情 -->
    <el-dialog
      :title="$t('notice.noticeDetail')"
      align="center"
      :visible.sync="dialogVisible"
      width="630px"
      :before-close="handleClose"
      class="dialog"
    >
      <!-- 发布人 -->
      <div class="detail-content">
        <div class="detail">
          <span class="detail-items">{{ $t('notice.publisher') }}:</span>
          <span>
            {{ noticeDetail.createUserName }}
          </span>
        </div>
        <div class="detail">
          <span
            class="detail-items title-items"
          >{{ $t('notice.noticeTitle') }}:</span>
          <span class="notice-detail-content" v-html="noticeDetail.title" />
        </div>
        <div class="detail">
          <span class="detail-items">{{ $t('notice.createTime') }}:</span>
          <span>{{ noticeDetail.createTime }}</span>
        </div>
        <div class="detail">
          <span
            class="detail-items content-items"
          >{{ $t('notice.noticeContent') }}:</span>
          <span class="notice-detail-content" v-html="noticeDetail.content" />
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">{{
          $t('notice.confirm')
        }}</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :title="addNoticeTitle"
      align="center"
      :visible.sync="addNoticeVisible"
      width="600px"
      :before-close="handleClose"
      class="dialog"
    >
      <add-notice
        :type="addNoticeType"
        @closeAddNoticeDialog="closeAddNoticeDialog"
        @getNotices="getNotices"
      />
    </el-dialog>
    <el-button type="text" @click="confirmDelete" />
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="search.page"
      :limit.sync="search.size"
      class="pagination"
      @pagination="pagination"
    />
  </div>
</template>

<script>
import { datetoISOString, trim } from '@/utils/';
import notices from '@/api/notices';
import Pagination from '@/components/Pagination';
import addNotice from './add-notice';

export default {
  components: { Pagination, addNotice },
  data() {
    return {
      search: {
        title: null,
        content: null,
        startTime: null,
        endTime: null,
        page: 1,
        size: 10,
      },
      dateTime: [],
      total: 0,
      notices: [],
      dialogVisible: false,
      selectNoticesIds: [],
      noticeDetail: [],
      id: null,
      addNoticeType: '0',
      addNoticeVisible: false,
      addNoticeTitle: '',
    };
  },
  created() {
    this.getNotices();
  },
  methods: {
    // 删除单个通知
    cancelNotice(id) {
      this.confirmDelete(id);
    },
    // 关闭通知详情
    handleClose(done) {
      done();
    },
    // 获得通知列表
    async getNotices() {
      const res = await notices.getMessagesList(this.search);
      this.notices = res.data;
      this.total = Number(res.headers['x-total-count']);
      this.notices.forEach(item => {
        item.createTime = this.$moment(new Date(item.createTime)).format(
          'YYYY-MM-DD HH:mm'
        );
      });
    },

    // 删除通知
    async deleteNotice(id) {
      const res = await notices.deleteMessages(id);
      if (res.status === 200) {
        this.$message({
          type: 'success',
          message: this.$t('notice.removeSuccessfully'),
        });
        this.getNotices();
      }
    },
    // 删除通知二次确认
    confirmDelete(id) {
      this.id = id;
      this.$confirm(this.$t('notice.confirmDelete'), {
        confirmButtonText: this.$t('notice.confirm'),
        cancelButtonText: this.$t('common.cancel'),
        type: 'warning',
      }).then(() => {
        this.deleteNotice(this.id);
      });
    },
    // 搜索通知
    async searchContent() {
      this.search.page = 1;
      this.getNotices();
    },
    // 获取通知详情
    async getNoticeDetail(row) {
      this.dialogVisible = true;
      this.noticeDetail = row;
      this.noticeDetail.createTime = this.$moment(
        new Date(this.noticeDetail.createTime)
      ).format('YYYY-MM-DD HH:mm');
    },
    // 分页
    pagination() {
      this.getNotices();
    },
    changeDate() {
      if (this.dateTime && this.dateTime.length === 2) {
        this.search.startTime = datetoISOString(this.dateTime[0]);
        this.search.endTime = datetoISOString(this.dateTime[1]);
      } else {
        this.search.startTime = null;
        this.search.endTime = null;
      }
    },
    /**
     * 获得Id
     * */
    getRowKeys(row) {
      return row.id;
    },
    /**
     * 添加消息
     * @param {String} type 添加消息类型 common/template
     * */
    addNoticeDialog(type) {
      this.addNoticeType = type;
      if (this.addNoticeType === '0') {
        this.addNoticeTitle = this.$t('notice.addCommonNotice');
      } else {
        this.addNoticeTitle = this.$t('notice.addTemplateNotice');
      }
      this.addNoticeVisible = true;
    },
    /**
     * 关闭添加消息
     * */
    closeAddNoticeDialog() {
      this.addNoticeVisible = false;
    },
    /**
     * 去除两端空格处理
     * @param {String} name 输入框名称
     */
    trim(name) {
      this.search[name] = trim(this.search[name]);
    },
    /**
     * 失去焦点
     * @param {DOMEvent} event 当前输入框
     */
    blurRule(event) {
      // 输入框失去焦点操作
      event.target.blur();
    },
  },
};
</script>

<style scoped lang="scss">
.notice {
  color: #333;
  font-size: 14px;
}
.search {
  display: flex;
  justify-content: space-between;
  padding: 15px;
}
.search-title,
.search-content {
  width: 180px;
  margin-left: 15px;
}
.search-date {
  width: 235px;
  margin-left: 15px;
}
.search-button {
  margin-left: 15px;
}
.notice-button {
  background-color: #2fd3aa;
  border-color: #2fd3aa;
  &:hover {
    opacity: 0.8;
  }
}
.notice-content {
  margin: 0 15px;
  padding: 15px 0 15px 15px;
}
.detail {
  margin-top: 15px;
  font-size: 16px;
  text-align: left;
}
.detail-content {
  margin: -40px 0 0 50px;
}
.images-box {
  display: inline-block;
  width: 400px;
}
.image-content {
  width: 44px;
  height: 44px;
  margin: 0 10px 10px 0;
  float: left;
}
.detail-items {
  display: inline-block;
  width: 110px;
  height: 20px;
  line-height: 20px;
  text-align: right;
  margin-right: 25px;
  color: #999;
}
.images {
  vertical-align: top;
}
.confirm {
  margin-right: 20px;
}
.attachment {
  vertical-align: top;
}
.attachment-items {
  display: inline-block;
}
.content-items,
.title-items {
  vertical-align: top;
}
.notice-detail-content {
  display: inline-block;
  width: 380px;
}
.notice-detail-content >>> img {
  max-width: 100%;
}
.pagination {
  margin: 0 15px;
  padding: 15px 0 15px 15px;
}
.title,
.content-inner {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.org-name {
  vertical-align: top;
}
</style>
